<template>
  <el-row>
    <el-col v-loading="pageLoading" :span="24">
      <Portlet title="商城基础资料">

        <el-button slot="tools" v-if="isEditing === false" type="primary" @click.prevent="isEditing = true">编辑
        </el-button>

        <el-form ref="elForm" v-if="isEditing === false" label-width="100px">
          <el-row :gutter="15">
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="storeName" label="店铺名称：">
                <span>{{ model.storeName }}</span>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="servicePhone" label="客服电话：">
                <span>{{ model.servicePhone }}</span>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="storeState" label="店铺状态：">
                <span>{{ model.storeState | isTrue }}</span>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="storeState" label="店铺编号：">
                <span>{{ storeCode }}</span>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :xl="6">
              <el-form-item prop="storeAbstract" label="店铺简介：">
                <span>{{ model.storeAbstract }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item prop="storeLogoArr" label="店铺LOGO：" label-width="120px">
                <UploadImage v-model="model.storeLogoArr" :max="1" readonly></UploadImage>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item prop="storeLogoArr" label="店铺二维码：" label-width="120px">
                <span>【{{ dimensionalCode }}】</span>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>

        <el-form ref="elForm" v-if="isEditing === true" :model="model" label-width="100px">
          <el-row :gutter="15">
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="storeName" label="店铺名称：" :rules="[
                {required: true, message: '店铺名称必须', trigger: 'blur'}
              ]">
                <el-input v-model="model.storeName" placeholder="店铺名称" maxlength="200"></el-input>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="servicePhone" label="客服电话：" :rules="[
                {required: true, message: '客服电话必须', trigger: 'blur'},
                {validator: isPhoneOrTel, message: '电话格式不正确', trigger: 'blur'}
              ]">
                <el-input v-model="model.servicePhone" placeholder="客服电话" maxlength="200"></el-input>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="storeState" label="店铺状态：" :rules="[
                {required: true, message: '店铺状态必须', trigger: 'blur'}
              ]">
                <el-switch
                  v-model="model.storeState"
                  active-text="开启"
                  inactive-text="关闭"
                  active-value="1"
                  inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item prop="storeAbstract" label="店铺简介：" :rules="[
                {required: true, message: '店铺简介必须', trigger: 'blur'}
              ]">
                <el-input type="textarea" v-model="model.storeAbstract" placeholder="店铺简介" maxlength="200"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item prop="storeLogoArr" label="店铺LOGO：" label-width="120px" :rules="[
                {required: true, message: '店铺LOGO必须', trigger: 'change', type: 'array'}
              ]">
                <UploadImage v-model="model.storeLogoArr" :max="1"></UploadImage>
              </el-form-item>
            </el-col>

            <el-col class="text-center" :span="24">
              <el-button :loading="loading" type="primary" @click.prevent="submit">确定</el-button>
              <el-button :loading="loading" @click.prevent="isEditing = false" type="info">取消</el-button>
            </el-col>
          </el-row>
        </el-form>
      </Portlet>
    </el-col>
  </el-row>
</template>
<script>
import {copy, dotData, confirm} from '@/utils'
import {isPhoneOrTel} from '@/utils/validate'
export default {
  data() {
    return {
      model: {
        servicePhone: '', // 客服电话
        storeAbstract: '', // 店铺简介
        storeName: '', // 店铺名称
        storeState: '', // 店铺状态
        storeLogoArr: [], // 店铺logo 数组
        status: '1',
        id: ''
      },
      loading: false,
      isEditing: '',
      pageLoading: false,
      detail: {}
    }
  },
  computed: {
    isEdit() {
      return !!this.model.id
    },
    storeCode() {
      return dotData(this.detail, 'storeCode')
    },
    dimensionalCode() {
      return dotData(this.detail, 'dimensionalCode')
    }
  },
  created() {
    this.initInfo()
  },
  methods: {
    isPhoneOrTel,
    initInfo() {
      this.pageLoading = true
      this.$ajax.get('/ms-warehouse-store/store/get-mallStoreInfo').then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.detail = dotData(response, 'data') || {}
          this.model.servicePhone = dotData(response, 'data.servicePhone')
          this.model.storeAbstract = dotData(response, 'data.storeAbstract')
          this.model.storeName = dotData(response, 'data.storeName')
          this.model.storeState = dotData(response, 'data.storeState')
          const storeLogo = dotData(response, 'data.storeLogo')
          if (storeLogo && typeof storeLogo === 'string') {
            this.model.storeLogoArr = storeLogo.split(',')
          }
          this.model.id = dotData(response, 'data.id')
          if (this.model.id) {
            this.isEditing = false
          } else {
            this.isEditing = true
          }
        } else {
          this.isEditing = true
        }
      }).catch(_ => {
        this.isEditing = true
      }).finally(_ => {
        this.pageLoading = false
      })
    },
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          return
        }
        let data = copy(this.model)
        data.storeLogo = data.storeLogoArr.join(',')
        this.loading = true
        this.$ajax.post('/ms-warehouse-store/store/save-mallStoreInfo', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            confirm(this.isEdit ? '编辑成功' : '新增成功').finally(_ => {
              this.isEditing = false
            })
          }
        }).finally(_ => {
          this.loading = false
        })
      })
    }
  }
}
</script>
